<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('出库历史作业')"/>
	<style>
		[v-cloak] {
			display: none;
		}
		.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 200px!important;
		}
		.el-input__icon {
			line-height: 0!important;
		}
		.tag {
			display: inline-block;
			padding: 0 5px;
			line-height: 22px;
			color: #FFFFFF;
			border-radius: 3px;
		}
	</style>
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="row">
		<div class="col-sm-12 search-collapse">
			<form id="formId">
				<div class="select-list">
					<ul>
						<li v-if="checkedSearch.indexOf('任务号') != -1">
							任务号：<input type="text" id="taskNumber" name="taskNumber"/>
						</li>
						<li v-if="checkedSearch.indexOf('任务类型') != -1">
							任务类型：
							<select name="type">
								<option value="">全部</option>
								<option value="1">生产出库</option>
								<option value="2">退货出库</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('任务状态') != -1">
							任务状态：
							<select name="state">
								<option value="">全部</option>
								<option value="0">任务已下发</option>
								<option value="1">执行中</option>
								<option value="2">报错</option>
								<option value="3">已完成</option>
								<option value="8">在途</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('出库线的AB口') != -1">
							出库线的AB口：
							<select name="pipeLineId">
								<option value="">全部</option>
								<option value="A">A</option>
								<option value="B">B</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('单晶编号') != -1">
							单晶编号：<input type="text" id="materialId" name="materialId"/>
						</li>
						<li v-if="checkedSearch.indexOf('物料编码') != -1">
							物料编码：<input type="text" id="materialProduct" name="materialProduct"/>
						</li>
						<li v-if="checkedSearch.indexOf('托盘号') != -1">
							托盘号：<input type="text" id="carrierId" name="carrierId"/>
						</li>
						<li v-if="checkedSearch.indexOf('交货单号') != -1">
							交货单号：<input type="text" id="billNo" name="billNo"/>
						</li>
						<li v-if="checkedSearch.indexOf('批次号') != -1">
							批次号：<input type="text" id="batch" name="batch"/>
						</li>
						<li v-if="checkedSearch.indexOf('单晶规格') != -1">
							单晶规格：
							<select name="specId">
								<option value="">全部</option>
								<option value="G12">G12</option>
								<option value="M6">M6</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('客户等级') != -1">
							客户等级：
							<select name="materialCategory">
								<option value="">全部</option>
								<option value="A">A</option>
								<option value="A+H">A+H</option>
								<option value="A-">A-</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('单晶PN型') != -1">
							单晶PN型：
							<select name="materialPN">
								<option value="">全部</option>
								<option value="P">P</option>
								<option value="N">N</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('拼棒类型') != -1">
							拼棒类型：
							<select name="assemblyType">
								<option value="">全部</option>
								<option value="1">整棒</option>
								<option value="2">二拼</option>
								<option value="3">三拼</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('质检属性') != -1">
							质检属性：
							<select name="result">
								<option value="">全部</option>
								<option value="0">OK</option>
								<option value="1">NG</option>
								<option value="3">灰度异常</option>
								<option value="4">长度异常</option>
								<option value="5">宽度异常</option>
								<option value="6">位置异常</option>
							</select>
						</li>
						<li v-if="checkedSearch.indexOf('单晶状态') != -1">
							单晶状态：
							<select name="billInState">
								<option value="">全部</option>
								<option value="1">待拆垛</option>
								<option value="2">待检</option>
								<option value="3">已检</option>
								<option value="4">在途</option>
								<option value="5">上架</option>
								<option value="6">异常</option>
							</select>
						</li>
						<li v-show="checkedSearch.indexOf('下架时间') != -1">
							<label>下架时间：</label>
							<el-date-picker
								name="startTime"
								v-model="timeA"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetime"
								@change="compareAB"
								placeholder="开始时间">
							</el-date-picker>
							<span>-</span>
							<el-date-picker
								name="endTime"
								v-model="timeB"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetime"
								@change="compareAB"
								placeholder="结束时间">
							</el-date-picker>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="resetTime()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							<a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>
						</li>
					</ul>
				</div>
			</form>
		</div>
		<el-dialog title="搜索条件" width="200px" :visible.sync="showMore">
			<el-row>
				<el-col :span="24">
					<el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
					<el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
						<el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
		</el-dialog>
		<div class="btn-group-sm" id="toolbar" role="group">
			<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="in:billOutTaskInfoHistory:export">
				<i class="fa fa-download"></i> 导出全部
			</a>
			<a class="btn btn-info" @click="partExcel()" shiro:hasPermission="in:billOutTaskInfoHistory:partExcel">
				<i class="fa fa-download"></i> 部分导出
			</a>
			<a class="btn btn-primary" onclick="$.table.print()">
				<i class="fa fa-plus"></i> 打印
			</a>
		</div>
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/wms/js/moreSearch.js}"></script>
<script th:inline="javascript">
	var prefix = ctx + "in/billOutTaskInfoHistory";

	const searchOptions = ['任务号', '任务类型', '任务状态', '出库线的AB口', '单晶编号', '物料编码', '托盘号', '交货单号', '批次号', '单晶规格', '客户等级', '单晶PN型', '拼棒类型', '质检属性', '单晶状态', '下架时间'];

	var app = new Vue({
		el: '.container-div',
		data: {
			showMore: false,
			checkAll: false,
			checkedSearch: ['任务号', '任务类型', '任务状态', '出库线的AB口', '单晶编号', '托盘号', '交货单号', '批次号', '质检属性', '单晶状态'],
			searches: searchOptions,
			isIndeterminate: true,
			timeA: '',
			timeB: ''
		},
		methods: {
			//时间对比
			compareAB: function(){
				if(this.timeA != '' && this.timeA != null){
					if(this.timeB != '' && this.timeB != null){
						var a = new Date(this.timeA);
						var b = new Date(this.timeB);
						if(a >= b){
							$.modal.alertError("结束时间需大于开始时间，请重新选择！！");
							this.timeA = '';
							this.timeB = '';
						}
					}else{
						this.timeB = '';
					}
				}else{
					this.timeA = '';
					if(this.timeB == null){
						this.timeB = '';
					}
				}
			},
			//清空时间
			resetTime(){
				this.timeA = '';
				this.timeB = '';
			},
			//部分导出
			partExcel(){
				var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
				if(rows.length == 0){
					$.modal.alertWarning("请至少选择一条记录");
					return;
				}else{
					$.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
						var url = prefix + "/partExcel";
						var data = {"ids": rows.join()};
						$.post(url, data, function(result){
							if(result.code == web_status.SUCCESS){
								window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
							}else if(result.code == web_status.WARNING){
								$.modal.alertWarning(result.msg);
							}else{
								$.modal.alertError(result.msg);
							}
							$.modal.closeLoading();
						});
					});
				}
			}
		}
	})

	$(function() {
		var options = {
			url: prefix + "/billOutFindList",
			exportUrl: prefix + "/export",
			modalName: "出库历史作业",
			columns: [
				{
					checkbox: true
				},
				{
					field: 'id',
					title: '序号',
					align: 'center',
					visible: false
				},
				{
					field: 'taskNumber',
					title: '任务号',
					align: 'center'
				},
				{
					field: 'typeName',
					title: '任务类型',
					align: 'center'
				},
				{
					field: 'state',
					title: '任务状态',
					align: 'center',
					formatter: function(value, item, index){
						if(value == 0){
							return '任务已下发';
						}else if(value == 1){
							return '执行中';
						}else if(value == 2){
							return '报错';
						}else if(value == 3){
							return '已完成';
						}else if(value == 8){
							return '在途';
						}
					}
				},
				{
					field: 'pipeLineId',
					title: '出库线的AB口',
					align: 'center'
				},
				{
					field: 'exitDevId',
					title: '目标粘棒机编码',
					align: 'center'
				},
				{
					field: 'materialId',
					title: '单晶编号',
					align: 'center'
				},
				{
					field: 'materialProduct',
					title: '物料编码',
					align: 'center'
				},
				{
					title: '物料名称',
					align: 'center',
					formatter: function(value, row, index){
						return '单晶方棒';
					}
				},
				{
					field: 'carrierId',
					title: '托盘号',
					align: 'center'
				},
				{
					field: 'billNo',
					title: '交货单号',
					align: 'center'
				},
				{
					field: 'batch',
					title: '批次号',
					align: 'center'
				},

				{
					field: 'specId',
					title: '单晶规格',
					align: 'center'
				},
				{
					field: 'materialCategory',
					title: '客户等级',
					align: 'center'
				},
				{
					field: 'materialPN',
					title: '单晶PN型',
					align: 'center'
				},
				{
					field: 'assemblyType',
					title: '拼棒类型',
					align: 'center',
					formatter: function(value, item, index){
						var actions = [];
						if(value == 1){
							actions.push("<span class='tag' style='background-color: #fcb529'>整棒</span>");
						}else if(value == 2){
							actions.push("<span class='tag' style='background-color: #45ade1'>二拼</span>");
						}else if(value == 3){
							actions.push("<span class='tag' style='background-color: #45ade1'>三拼</span>");
						}
						return actions.join('');
					}
				},
				{
					field: 'result',
					title: '质检属性',
					align: 'center',
					formatter: function(value, row, index){
						var actions = [];
						if(value == 0){
							actions.push("<span class='tag' style='background-color: #1ab394'>OK</span>");
						}else if(value == 1){
							actions.push("<span class='tag' style='background-color: #ed5565'>NG</span>");
						}else if(value == 3){
							actions.push("<span class='tag' style='background-color: #ed5565'>灰度异常</span>");
						}else if(value == 4){
							actions.push("<span class='tag' style='background-color: #ed5565'>长度异常</span>");
						}else if(value == 5){
							actions.push("<span class='tag' style='background-color: #ed5565'>宽度异常</span>");
						}else if(value == 6){
							actions.push("<span class='tag' style='background-color: #ed5565'>位置异常</span>");
						}
						return actions.join('');
					}
				},
				{
					field: 'billTypeName',
					title: '单晶状态',
					align: 'center'
				},
				{
					field: '',
					title: '下架时间',
					align: 'center',
					formatter: function(value, item, index){
						if(value == null){
							return '-';
						}else{
							return value.slice(0, 19);
						}
					}
				}
			]
		};
		$.table.init(options);
	});
</script>
</body>
</html>
